<!--收费统计表-->
<template>
  <div class="mod-config">
    <el-card>
      <el-form :inline="true" :model="dataForm" size="mini">
        <el-form-item style="margin-left: 20px;">
          <el-date-picker v-model="dataForm.startDate" type="date"  placeholder="开始日期" class="date_type" :picker-options="pickerOptionsStart" @change="changeEnd"></el-date-picker> 至
          <el-date-picker v-model="dataForm.endDate" type="date"  placeholder="至今" class="date_type"  :picker-options="pickerOptionsEnd" @change="changeStart"></el-date-picker>
        </el-form-item>
        <el-form-item label="业务负责人:" >
          <el-select v-model="dataForm.business" placeholder="全部" clearable  style="width: 150px;" @change="getChargeChart">
            <el-option v-for="item in ContractBusinessList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
<!--          <el-button icon="el-icon-printer" type="primary" @click="printChart">打印</el-button>-->
          <el-button icon="el-icon-printer" type="success" @click="exportExcelHandle">导出Excel</el-button>
        </el-form-item>
      </el-form>
      <div id="chartId" v-loading="dataListLoading" >
        <div class="chart_title">
          <div>收费统计表</div>
          <div class="date_title">{{dateTitle}}</div>
        </div>
        <!--统计报表-->
        <el-table :data="dataList" border stripe style="width: 100%;" :row-style="tableRowStyle"
                  @sort-change="changeSort" :row-key="getRowKeys" :expand-row-keys="expands" show-summary :summary-method="getSummaryMethod"
                  :header-cell-style="{background: 'steelblue',color:'white'}" >
          <el-table-column type="expand" >
            <template slot-scope="props">
              <strong>收支明细：</strong>
              <el-table  :data="props.row.accountList" border style="width: 100%;" :header-cell-style="{background: '#c6c7d4',color:'black'}">
                <el-table-column prop="accountAddDateTime" header-align="center" align="left"
                                 label="日期" width="150"></el-table-column>
                <el-table-column prop="accountTypeName" header-align="center" align="center"
                                 label="收支" width="100"></el-table-column>
                <el-table-column prop="accountNum" header-align="center" align="right" label="金额" width="150">
                  <template slot-scope="scope">
                    {{scope.row.accountNum.toFixed(2)}}
                  </template>
                </el-table-column>
                <el-table-column prop="accountNote" header-align="center" align="left" label="备注"></el-table-column>
              </el-table>
              <strong>发票明细：</strong>
              <el-table :data="props.row.billList" border :header-cell-style="{background: '#c6c7d4',color:'black'}">
                <el-table-column prop="createTime" label="时间" sortable width="180"></el-table-column>
                <el-table-column prop="createTime" label="是否开发票" sortable width="140">
                  <template slot-scope="scope">
                    <el-tag type="primary" v-if="scope.row.billSet === 1">是</el-tag>
                    <el-tag type="info" v-else>否</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="contractName" header-align="center" align="left" label="合同名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="contractAuthorize" header-align="center" align="center" label="委托单位" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="username" header-align="center" align="center" label="联系人" width="110"></el-table-column>
          <el-table-column prop="userphone" header-align="center" align="center" label="联系电话" width="110"></el-table-column>
          <el-table-column prop="contractMoney" header-align="center" align="right" label="应收" width="110">
            <template slot-scope="scope">
              {{scope.row.contractMoney.toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column prop="projectActuallyReceipts" header-align="center" align="right" label="实收" width="110">
            <template slot-scope="scope">
              {{scope.row.projectActuallyReceipts.toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column prop="projectNotReceipts" header-align="center" align="right" label="未收" width="110">
            <template slot-scope="scope">
              {{scope.row.projectNotReceipts.toFixed(2)}}
            </template>
          </el-table-column>
          <el-table-column prop="contractBusiness" header-align="center" align="center" label="业务负责人" width="130"
                           sortable="custom" :sort-orders="['descending','ascending']"></el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
  import moment from 'moment'
  import index from '../../../icons'

  export default {
    data () {
      return {
        expands: [],
        pickerOptionsStart: {},
        pickerOptionsEnd: {},
        dataForm: {
          key: '',
          // 业务负责人
          business: '',
          // 类型选择
          projecttype: '',
          startDate: '',
          endDate: '',
          sidx: '',
          order: 'asc'
        },
        dateTitle: '', // 日期标题
        // 业务负责人列表
        ContractBusinessList: [],
        totalProjectSum: 0,  // 项目合计数
        totalProjectShould: 0, // 统计实收
        totalProjectAct: 0, // 统计实收
        totalProjectNot: 0, // 统计未收
        dataListLoading: false,
        dataList: []
      }
    },
    activated () {
      this.dataForm.startDate = new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)
      this.dataForm.endDate = new Date(new Date().getFullYear(), new Date().getMonth() + 1 , 0)
      this.changeEnd()
      // 业务负责人选项
      this.getContractBusinessDataListFromApi()
      this.dataForm.startDate = moment(new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1)).format('YYYY-MM-DD')

    },
    methods: {
      // 获取数据列表
      getChargeChart () {
        this.dateTitle = (this.dataForm.startDate === null ? '' : moment(this.dataForm.startDate).format('YYYY-MM-DD')) + '至' + (this.dataForm.endDate === '' ? '今' : moment(this.dataForm.endDate).format('YYYY-MM-DD'))
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/finance/account/getFinanceList'),
          method: 'get',
          params: this.$http.adornParams({
            'projectType': '',
            'business': this.dataForm.business,
            'startDate': this.dataForm.startDate,
            'sidx': this.dataForm.sidx,
            'endDate': this.dataForm.endDate,
            'order': this.dataForm.order
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.list
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      // 排序字段改变
      changeSort (val) {
        console.log(val)
        switch (val.order) {
          case 'ascending':
            this.dataForm.order = 'asc'
            break
          case 'descending':
            this.dataForm.order = 'desc'
            break
          default:
            this.dataForm.order = 'desc'
        }
        this.dataForm.sidx = "contract_business"
        this.getChargeChart()
      },
      //
      tableRowStyle({row, rowIndex}) {
        return 'background-color: #fff;color: #000;font-weight:700;'
      },
      // 获取row的key值
      getRowKeys (row) {
        return row.contractNo
      },
      toggleRowExpansion (row) {
        this.expands = []
        this.expands.push(row.contractNo)
      },
      // 获取统计方法
      getSummaryMethod (param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 1) {
            sums[index] = '总共合计' + this.dataList.length + '个合同'
            return
          }
          if (index === 2 || index === 3 || index === 4 ) {
            sums[index] = '/'
            return
          }
          if ( index === 5 || index === 6 || index === 7 ) {
            const values = data.map(item => Number(item[column.property]))
            let sum = 0
            for (let value of values) {
              sum += value
            }
            sums[index] = sum.toFixed(2)
            return
          }
        })
        return sums
      },
      // 从后台获得业务负责人数据列表内容  填充至选项
      getContractBusinessDataListFromApi () {
        return new Promise((resolve, reject) => {
          this.$http({
            url: this.$http.adornUrl('/finance/account/getContractBusinessList'),
            method: 'get'
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.ContractBusinessList = data.list
              resolve(data.list)
            } else {
              this.ContractBusinessList = []
            }
          })
        })
      },
      // 开始时间改变
      changeStart () {
        this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
          disabledDate: (time) => {
            return time.getTime() > this.dataForm.endDate
          }
        })
        this.pageIndex = 1
        this.getChargeChart()
      },
      // 结束时间改变
      changeEnd () {
        this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
          disabledDate: (time) => {
            return time.getTime() < this.dataForm.startDate
          }
        })
        this.pageIndex = 1
        this.getChargeChart()
      },
      // 导出Excel
      exportExcelHandle () {
        this.dataListLoading = true
        let startDate = moment(this.dataForm.startDate).format('YYYY-MM-DD')
        let endDate = moment(this.dataForm.endDate).format('YYYY-MM-DD')
        this.$http({
          url: this.$http.adornUrl('/finance/account/exportExcel'),
          method: 'get',
          params: this.$http.adornParams({
            'key': this.dataForm.key,
            'sidx': this.dataForm.sidx,
            'order': this.dataForm.order,
            'startDate': startDate,
            'endDate': endDate
          }),
          responseType: 'blob'
        }).then(({data}) => {
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(data) // 创建下载的链接
          downloadElement.href = href
          downloadElement.download = '收费统计列表（' + startDate + '至' + endDate + '）.xls' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
          this.dataListLoading = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "src/assets/scss/_variables.scss";
  .date_type{
    width: 140px;
  }
  .date_type /deep/ .el-input__inner {
    color: $--color-primary;
    font-weight: bolder;

  }
  .month_type{
    width: 150px;
  }
  .chart_title{
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: 27px;
    font-weight: 700;
  }
  .chart_title .date_title{
    margin-top: 4px;
    font-size: 18px;
    font-weight: 500;
  }
  .table_class{
    margin-top: 10px;
  }
  .table_class .table_row{
    border-bottom: 1px solid #6f7180;
  }
  .table_class .item_row{
    border-bottom: 1px solid #6f7180;
  }
  .table_class .item_row:hover{
    cursor: pointer;
    background-color: rgba(0, 183, 238, 0.59);
  }
  .table_class .table_row .grid-header{
    font-weight: 700;
    font-size: 16px;
    color: rgba(15, 17, 23, 0.78);
  }
  .table_class .table_row .group-header{
    font-weight: 700;
    font-size: 15px;
  }

  .ContractNameSpan{
    float:left;
    margin-right:15px;
  }
  .ContractBusinessSpan{
    float:left;
    margin-left:15px;
  }
  .ChargeChartTitleSpan{
    float:left;
    margin-left:15px;
  }
  .ContractCountSpan{
    float:left;
    margin-left:10px;
  }
  .table_class .item_footer{
    color: #00b7ee;
  }
</style>



